<template>
	<div>
		<button
			@click="add(index, value)"
			v-for="(value, index) in list"
			:key="index"
		>
			{{ value }}
		</button>
		<h1>{{ sum }}</h1>
	</div>
</template>
<script>
export default {
	methods: {
		add(index, old) {
			this.list.splice(index, 1, old + 1)
		},
	},
	data() {
		return {
			list: [1, 2, 3, 4, 5],
		}
	},
	// 监听:仅仅是对数据监听，不可以修改数据，但是能够执行异步代码，复合类型的数据要开启深度监听
	watch: {
		list: {
			handler(value, old) {
				if (value[value.length - 1] === 10) {
					alert('达到最大上限了')
				}
			},
			deep: true,
		},
	},
	// 计算属性：监听值返回新值
	computed: {
		sum() {
			console.log('12246')
			return this.list.reduce((a, b) => {
				return a + b
			})
		},
	},
}
</script>